<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ act }}</h1>
        <h1>当前值为：{{ sum }}</h1>
        <h1>当前值放大10倍为：{{ bigSum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">和为奇数再加</button>
        <button @click="incrementWait">等会加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    export default {
        name:'Count',
        data(){
            return {
                n:1,
            }
        },
        computed:{
            // sum(){
            //     return this.$store.state.sum
            // },
            // bigSum(){
            //     return this.$store.getters.bigSum
            // },
            // name(){
            //     return this.$store.state.name
            // },
            // act(){
            //     return this.$store.state.act
            // }
            /************************************************ */
            //ES6语法  ...表示将数据展开为键值对形式
            //mapState的对象写法
            // ...mapState({
            //     sum:'sum',
            //     name:'name',
            //     act:'act'
            // }),
            //数组写法 当computed的名字和$store.state中的数据一样时可简写
            ...mapState(['sum','name','act']),

            //mapGetters的对象写法
            // ...mapGetters({bigSum:'bigSum'}),
             //数组写法 
             ...mapGetters(['bigSum'])
        },
        methods:{
            increment(){
                // this.$store.dispatch('increment',this.n)
                this.$store.commit('INCREMENT',this.n)
            },
            decrement(){
                // this.$store.dispatch('decrement',this.n)
                this.$store.commit('DECREMENT',this.n);
            },
            incrementOdd(){
                this.$store.dispatch('incrementOdd',this.n)
            },
            incrementWait(){
                this.$store.dispatch('incrementWait',this.n)
            }
        },
    }
</script>

<style scoped>
    button {
        margin-left: 6px;
    }
</style>